<%@ page language="java" contentType="text/html" import="com.dao.*,com.beans.*,java.util.*" pageEncoding="utf-8"%>
<%String path = request.getContextPath();String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"  %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="css/edittable.css"></link>
<link rel="stylesheet" type="text/css" href="css/validate.css"></link>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>

<script>

	$(function() {
		
		$("input[type=text],textarea").focus(function() {
			$(this).addClass("input_focus");
		}).blur(function() {
			$(this).removeClass("input_focus");
		});

		$(".form_btn").hover(function() {
			$(this).css("color", "red").css("background", "#6FB2DB");
		},

		function() {
			$(this).css("color", "#295568").css("background", "#BAD9E3");
		});
		
		var ok1=false;/* 商品名称验证*/
		var ok2=false;/* 计量单位验证*/
		var ok3=false;/* 商品价格验证 */
		var ok4=false;/* 验证是否选择商品分类 */
		var ok5=false;/* 验证是否正确上传图片 */
		
		var pictureSrc="";/* 提交后回显图片 */
		
		$("#goodsName").blur(function() {/* 商品名称验证*/
			var goodsName=$("#goodsName").val();//当前用户输入的值
			var flag=false;
			
		  	var reg = /[^\s]{2,20}/; //2-20位；非空白字符
			if (!reg.test(goodsName)){
				$("#goodsName_msg").text("商品名格式非法!").removeClass().addClass("validate_error");
				ok1=false;
			}else{
				$("#goodsName_msg").text("√").removeClass().addClass("validate_ok");
				ok1=true;
			}  
		});
		
		
		$("#unit").blur(function() {/* 计量单位验证*/
			var unit=$("#unit").val();//当前用户输入的值
			
			var reg = /[^\s]{1,10}/;//1-10位；非空白字符
			if (!reg.test(unit)){
				$("#unit_msg").text("计量单位格式非法!").removeClass().addClass("validate_error");
				ok2=false;
			}else{
				$("#unit_msg").text("√").removeClass().addClass("validate_ok");
				ok2=true;
			}  

		});
		
		$("#price").blur(function() {/* 商品价格验证（不能为空；以元为单位；可以是小数） */
			var price=$("#price").val();//当前用户输入的值
			
			var reg = /^(0|[1-9][0-9]{0,9})(\.[0-9]{1,2})?$/;
			if(!reg.test(price)){
				$("#price_msg").text("请填写正确格式的商品价格!").removeClass().addClass("validate_error");
				ok3=false;
			}else{
				$("#price_msg").text("√").removeClass().addClass("validate_ok");
				ok3=true;
			}  

		});
		
		$("#bigCateId,#smallCateId").blur(function() {/* 验证是否选择商品分类 */
			var bigCateId=$("#bigCateId").val();//当前用户输入的值
			var smallCateId=$("#smallCateId").val();//当前用户输入的值
			
			if(bigCateId==-1||smallCateId==-1){
				$("#cate_msg").text("未选择商品分类!").removeClass().addClass("validate_error");
				ok4=false;
			}else{
				$("#cate_msg").text("√").removeClass().addClass("validate_ok");
				ok4=true;
			}  

		});
		
		 $('#pictureData').change(function(){
	    	var filePath = $(this).val();
	    	fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
	    	pictureSrc = window.URL.createObjectURL(this.files[0]); 
	    	
	    	if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
	    		$('#pictureData_show').attr('src',"");
	    		$('#pictureData').attr('value',"");
	    		alert('上传错误,文件格式必须为：png/jpg/jpeg');
	        	return;  
	        }else{
	        	$('#pictureData_show').attr('src',pictureSrc);
	        	$("#picturePath").attr('value',pictureSrc);/*图片回显*/
	        	ok5=true;
	        }
		});
		 
		 
		$("#reset").click(function(){
	    	$('#pictureData_show').attr('src',"");
	    	$("#smallCateId").empty();
			var s = "<option  value='-1'>===请选择===</option>";
			$("#smallCateId").append(s);
	    	
		});
		
		$("#goodsName").focus(function() {
			$("#goodsName_msg").text("2-20位；非空白字符").removeClass().addClass("validate_info");
		});
		
		$("#unit").focus(function() {
			$("#unit_msg").text("1-10位；非空白字符").removeClass().addClass("validate_info");
		});
		
		$("#price").focus(function() {
			$("#price_msg").text("不能为空；以元为单位；可以是小数").removeClass().addClass("validate_info");
		});
		
		$("#bigCateId").focus(function() {
			$("#cate_msg").text("请指定商品分类").removeClass().addClass("validate_info");
		});
		
		
		
		$("#form_btn").click(function(){/* 提交的总验证 */
			var result=false;
			$("#goodsName").blur();
			$("#unit").blur();
			$("#price").blur();
			$("#bigCateId").blur();
			if(ok1 && ok2 && ok3 &&ok4 &&ok5){
				result=true;
            }else{
            	$("#result_msg").text("信息填写有误").removeClass().addClass("validate_error");
            	return result;
            }
			if(result==true){
				result=confirm("确定要提交吗");
			}
			return result;

        });
		
	});
	
	
	/*所属分类的菜单联动*/
	$(function() {
		$.ajax({
			url:"GoodsServlet.do?flag=getCate",
			type:"post",
			dataType:"json",
			success:function(cateList){    
				/*画一级菜单*/
				$.each(cateList,function(k,cate){
					var str = "<option value="+cate.id+">"+ cate.cateName + "</option>";
					$("#bigCateId").append(str);
					
				});
				
				/*根据一级菜单的改变来联动显示二级才菜单*/
				$("#bigCateId").change(function() {
					$("#smallCateId").empty();
					var pId = this.value;
					var s = "<option  value='-1'>===请选择===</option>";
					$("#smallCateId").append(s);

					$.each(cateList,function(k,cate){
						$.each(cate.subCateList,function(k,sub_cate){
							$("#smallCateId").append(str);
							if (sub_cate.parentId == pId) {
								var str = "<option  value="+sub_cate.id+">"+ sub_cate.cateName + "</option>";
								$("#smallCateId").append(str);
							}
						});  
					});
				});
			}
		});	
	});	

</script>

<script type="text/javascript">
	setTimeout("$('#bigCateId').val('${param.bigCateId}').change()", 100);/* 下拉框回显 */
	setTimeout("$('#smallCateId').val('${param.smallCateId}')", 100);
</script>

</head>

<body>

	
	
	<div class="div_title">
		<div class="div_titlename">
			<img src="images/san_jiao.gif"><span>商品管理 | 添加商品</span>
		</div>
	</div>

	<form id="goodsAdd_form" action="GoodsServlet.do?flag=addGoods" method="post" enctype = "multipart/form-data" onsubmit="return validate()">
	<input type="hidden" id="picturePath" name="picturePath" value=""><!-- 隐藏域（获取图片的url返回服务端，用作回显）	 -->
		<table class="edit_table">
			<tr>
				<td class="td_info">
					商品名称:
				</td>
				<td class="td_input_short">
					<input type="text" class="txtbox"id="goodsName" name="goodsName" value="${param.goodsName}"/>
				</td>
				<td>
					<label class="validate_info" id="goodsName_msg">2-20位；非空白字符</label>
				</td>
			</tr>
			
			<tr>
				<td class="td_info">
					所属分类:
				</td>
				<td style="width:230px;">
					<select name="bigCateId" id="bigCateId">
						<option value="-1">===请选择===</option>
					</select>
					
					<select name="smallCateId" id="smallCateId">
						<option value="-1">===请选择===</option>
					</select>	
					
				</td>
				
				<td>
					<label class="validate_info" id="cate_msg">请指定商品分类</label>
				</td>
			</tr>
			
			<tr>
				<td class="td_info">
					计量单位:
				</td>
				<td class="td_input_short">
					<input type="text" class="txtbox"id="unit" name="unit" value="${param.unit}"/>
				</td>
				<td>
					<label class="validate_info" id="unit_msg">1-10位；非空白字符</label>
				</td>
			</tr>
			
			<tr>
				<td class="td_info">
					商品价格:
				</td>
				<td class="td_input_short">
					<input type="text" class="txtbox"id="price" name="price" value="${param.price}"/>
				</td>
				<td>
					<label class="validate_info" id="price_msg">不能为空；以元为单位；可以是小数</label>
				</td>
			</tr>
			
			<tr>
				<td class="td_info">
					生产厂商:
				</td>
				<td class="td_input_short">
					<input type="text" class="txtbox"id="producter" name="producter" value="${param.producter}"/>
				</td>
				
				<td>
					<label></label>
				</td>
			</tr>
			
			
			<tr>
				<td class="td_info">
					商品图片:
				</td>
				<td style="width:230px;" class="td_input_short">
					<input type="file" accept="image/png,image/gif,image/jpeg" id="pictureData" name="pictureData"/>
				</td>
				<td>
					<label>
						<img height="60px" width="80px" id="pictureData_show" alt="未选择图片" src="${picturePath}"/>
					</label>
				</td>
			</tr>
			
			<tr>
				<td class="td_info">
					备注信息:
				</td>
				<td>
					<textarea rows="4" cols="27" name="des" style="resize:none" class="txtarea" >${param.des}</textarea>
				</td>
				<td>
					<label></label>
				</td>
			</tr>
			<tr>
				<td class="td_info"></td>
				<td>
					<input id="form_btn" class="form_btn" type="submit" value="提交" /> 
					<input id="reset" type="reset" class="form_btn" value="重置" />
				</td>
				<td>
					<label id="result_msg" class="result_msg">${msg}</label>
				</td>
			</tr>
		</table>
	</form>
	
</body>
</html>
